<template>
  <div class="outside">
    <!-- 顶部导航 -->
    <a name="goods"></a>
    <div
      class="nav"
      :style="setFixed"
      @scroll="setNavPosition"
    >
      <img
        src="../assets/images/left.png"
        alt=""
        @click="$router.back()"
      />
      <div
        v-for="(item, index) in navList"
        :key="item"
        :class="{ active: navTask === index }"
        @click="navChange(index), to(item.to)"
      >
        <p>{{ item.title }}</p>
      </div>
      <span></span>
    </div>
    <span></span>
  </div>
  <!-- 顶部轮播图 -->
  <div
    class="back"
    id="product"
    @click="$router.back()"
  >
    <img
      src="../assets/toLeft.png"
      alt=""
    />
  </div>
  <nut-swiper
    :init-page="page3"
    :loop="true"
    auto-play="3000"
    @change="change"
  >
    <nut-swiper-item
      v-for="item in this.figureList"
      :key="item"
    >
      <img
        :src="item"
        alt=""
      />
    </nut-swiper-item>
    <template v-slot:page>
      <div class="page">{{ current }}/4</div>
    </template>
  </nut-swiper>
  <!-- 商品标题区域 -->
  <div class="product">
    <div class="product_price">
      <h3>¥ 1256.5</h3>
      <div class="brand">品牌直采</div>
    </div>
    <div class="tax">
      <div>
        <p>税</p>
      </div>
      <span>14.34</span>
    </div>
    <div class="product_title">
      <p>法国BDM大圆圈耳环女网红欧美夸张时尚耳圈气质韩国个性高级感ins</p>
    </div>
    <div class="tag">
      <p>·跨境商品·品牌授权·品牌直采</p>
    </div>
  </div>
  <!-- 运费、说明、参数选择 -->
  <div class="choose">
    <div class="freight">
      <h3>运费</h3>
      <p>免运费</p>
    </div>
    <div class="instructions">
      <h3>说明</h3>
      <p>商品税费 丨 假一赔十 丨 7天无理由退货</p>
    </div>
    <div class="parameter">
      <h3>参数选择</h3>
      <!-- 参数弹出层 -->
      <parameterCom
        class="parameter_msg"
        :img="this.figureList[0]"
      ></parameterCom>
    </div>
  </div>
  <!-- 品牌信息 -->
  <div class="brand_msg">
    <div class="title">品牌信息</div>
    <div class="brand_name">
      <h3>品牌名</h3>
      <p>BDM STUDIO</p>
    </div>
    <div class="brand_address">
      <h3>原产地</h3>
      <p>法国巴黎</p>
    </div>
    <div class="style">
      <h3>风格</h3>
      <p>欧美</p>
    </div>
  </div>
  <!-- 用户评价 -->
  <div
    class="evaluation"
    id="eval"
  >
    <div class="title">
      <h3>用户评价</h3>

      <div
        class="button"
        @click="toAll"
      >
        <router-link to="/allEvaluation"> 查看所有 </router-link>
      </div>
    </div>
    <evaluationCardCom></evaluationCardCom>
  </div>
  <!-- 商品详情 -->
  <div
    class="goods_details"
    id="detail"
  >
    <div class="title">
      <h3>商品详情</h3>
    </div>
    <div class="content">
      <img
        v-for="item in this.introduceImg"
        :key="item"
        :src="item"
        alt=""
      />
    </div>
  </div>
  <!-- 相似推荐 -->
  <similarCom id="rec"></similarCom>
  <div class="bottom">
    <div class="shop">
      <img
        src="../assets/shop.png"
        alt=""
      />
      <p>店铺</p>
    </div>
    <div class="service">
      <img
        src="../assets/service.png"
        alt=""
      />
      <p>客服</p>
    </div>
    <div class="collection">
      <img
        src="../assets/images/collection.png"
        alt=""
      />
      <p>收藏</p>
    </div>
    <div class="bottom_btn">
      <nut-button
        shape="square"
        type="primary"
        class="add"
        color="#f0d5b8"
        @click="addGoods"
      >
        <p>加入购物车</p>
      </nut-button>
      <!-- <router-link to="/orderSettlement"> -->
      <nut-button
        shape="square"
        type="primary"
        class="buy"
        color="#c1ab96"
        @click="settle"
      >
        <p>立即购买</p>
      </nut-button>
      <!-- </router-link> -->
    </div>
  </div>
</template>
<script>
import "../style/reset.scss";
import parameterCom from "@/components/detailsParameterCom.vue";
import evaluationCardCom from "@/components/evaluationCardCom.vue";
import similarCom from "@/components/similarCom.vue";
import { mapState } from "vuex";
export default {
  data () {
    return {
      // 设置导航栏滚动position:fixed
      setFixed: "",
      // 轮播图起点
      page3: 0,
      // 轮播图分页器
      current: 1,
      // 导航栏切换
      navList: [
        { title: "商品", to: "#product" },
        { title: "评价", to: "#eval" },
        { title: "详情", to: "#detail" },
        { title: "推荐", to: "#rec" },
      ],
      navTask: 0,
      // 商品列表的下标
      id: 0,
      // 参数弹出层
      // show: true
      // addSuccess: false
    };
  },
  created () {
    // vuex请求详情页轮播图
    this.$store.dispatch('getDetailsData')
    // vuex请求商品列表
    this.$store.dispatch('getGoodsListData')
    // vuex请求商品详情介绍图片
    this.$store.dispatch('getDetailsIntroduceData')
    // vuex请求购物车数据
    this.$store.dispatch('getShopCartData')
  },
  mounted () {
    // 开启滚动条监听
    window.addEventListener('scroll', this.setNavPosition)
  },
  unmounted () {
    //离开该页面需要移除这个监听的事件
    window.removeEventListener('scroll', this.setNavPosition)
  },
  methods: {
    // 导航栏滚动超出固定
    setNavPosition () {
      let scroll_height =
        document.body.scrollTop ||
        document.documentElement.scrollTop ||
        window.pageYOffset
      // 导航栏吸顶
      if (scroll_height > 10) {
        this.setFixed = 'display:flex'
      } else {
        this.setFixed = ''
      }
      // 导航栏激活态滚动切换
      if (scroll_height < 400) {
        this.navChange(0)
      } else if (scroll_height > 700 && scroll_height < 1000) {
        this.navChange(1)
      } else if (scroll_height > 1000 && scroll_height < 2800) {
        this.navChange(2)
      } else if (scroll_height > 2800) {
        this.navChange(3)
      }
    },
    // 导航栏锚点跳转
    to (selector) {
      document.querySelector(selector).scrollIntoView({
        behavior: "smooth",
      });
    },
    // 轮播图分页器切换事件
    change (index) {
      this.current = index + 1;
    },
    // 导航栏点击样式切换事件
    navChange (index) {
      this.navTask = index;
    },
    // 点击跳转所有评价
    toAll () {
      this.$router.push("/allEvaluation");
    },
    // 点击加入购物车
    addGoods () {
      // 弹出参数选择
      this.$store.commit("show");
    },
    // 点击立即购买跳转结算界面
    settle () {
      let arr = [];
      arr.push(this.goodsList[1].id);
      this.$router.push({
        name: "orderSettlement",
        params: { list: [] },
      });
    },
  },
  computed: {
    ...mapState(["figureList", "introduceImg", "goodsList", "addSuccess"]),
  },
  components: {
    parameterCom,
    evaluationCardCom,
    similarCom,
  },
}
</script>
<style lang="scss" scoped>
.outside {
  overflow: hidden;
  background-color: #eae9e5;
}
.nav {
  width: 100vw;
  height: 44px;
  justify-content: space-between;
  align-items: center;
  background-color: #eae9e5;
  position: fixed;
  z-index: 999;
  display: none;

  img {
    width: 28px;
    height: 28px;
  }
  div {
    font-size: 14px;
    color: #333333;
    vertical-align: none;
    text-align: center;
    :hover {
      cursor: pointer;
    }
  }
  .active {
    font-weight: bold;
    color: rgb(193, 171, 150);
    position: relative;
    &::after {
      content: "";
      position: absolute;
      left: -10px;
      top: 25px;
      width: 48px;
      height: 4px;
      background-color: rgb(193, 171, 150);
    }
  }
}
.back {
  position: absolute;
  z-index: 999;
  top: 10px;
  left: 10px;
  img {
    width: 28px;
    height: 28px;
  }
}
.nut-swiper {
  width: 100vw;
  height: 395px;
  .nut-swiper-inner {
    width: 100vw;
    height: 395px;

    .nut-swiper-item {
      width: 100vw;
      height: 395px;

      img {
        width: 100vw;
        height: 100%;
        transform: scale(1.06);
      }
    }
  }
}

.page {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 46px;
  height: 22px;
  background: rgba(0, 0, 0, 0.33);
  border-radius: 22px;
  text-align: center;
  color: #fff;
  font-size: 14px;
}
.product {
  margin-bottom: 10px;
  box-sizing: border-box;
  padding: 5px 12px 2px 12px;
  display: flex;
  flex-direction: column;
  height: 150px;
  width: 100vw;
  background-color: #ffffff;
  .product_price {
    display: flex;
    align-items: center;
    h3 {
      font-weight: 700;
      font-size: 22px;
      text-align: left;
    }
    .brand {
      width: 73px;
      height: 24px;
      margin-left: 1em;
      border: 1px solid rgba(193, 171, 150, 1);
      border-radius: 4px;
      text-align: center;
      line-height: 24px;
      color: rgba(193, 171, 150, 1);
    }
  }
  .tax {
    display: flex;
    align-items: center;
    margin-top: 5px;
    div {
      width: 18px;
      height: 18px;
      border-radius: 2px;
      background-color: rgba(193, 171, 150, 1);
      p {
        font-size: 14px;
        text-align: center;
        line-height: 18px;
        color: #ffffff;
      }
    }
    span {
      margin-left: 5px;
      font-weight: 700;
      font-size: 16px;
      color: #c1ab96;
      text-align: left;
      line-height: 16px;
    }
  }
  .product_title {
    margin-top: 5px;
    font-weight: 700;
    font-size: 14px;
    text-align: left;
  }
  .tag {
    margin-top: 10px;
    font-weight: 700;
    font-size: 12px;
    color: #c1ab96;
    text-align: left;
    line-height: 16px;
  }
}
.choose {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 120px;
  background-color: #ffffff;
  margin-bottom: 10px;
  box-sizing: border-box;
  padding: 10px 12px 10px 12px;
  .freight {
    display: flex;
    h3 {
      font-weight: 700;
      font-size: 14px;
      text-align: left;
      display: block;
      width: 90px;
    }
    p {
      font-weight: 700;
      font-size: 14px;
      text-align: left;
    }
  }
  .instructions {
    display: flex;

    h3 {
      font-weight: 700;
      font-size: 14px;

      text-align: left;
      display: block;
      width: 90px;
    }
    p {
      font-weight: 700;
      font-size: 14px;

      text-align: left;
    }
  }
  .parameter {
    display: flex;
    position: relative;
    h3 {
      font-weight: 700;
      font-size: 14px;

      text-align: left;
      display: block;
      width: 90px;
    }
    // p {
    //   font-weight: 700;
    //   font-size: 14px;
    //   text-align: left;
    //   color: #c1ab96;
    // }
  }
}
// .msg {
//   position: fixed;
//   width: 150px;
//   height: 100px;
//   border-radius: 5px;
//   background-color: #474645;
//   opacity: 0.6;
//   top: 50%;
//   left: 50%;
//   transform: translate(-50%, -50%);
//   z-index: 999;
//   text-align: center;
//   p {
//     color: #fff;
//     line-height: 100px;
//     font-size: 14px;
//   }
// }
.brand_msg {
  width: 100%;
  height: 160px;
  margin-bottom: 10px;
  box-sizing: border-box;
  padding: 10px 12px 10px 12px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .title {
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    text-align: left;
  }
  .brand_name {
    display: flex;
    h3 {
      font-weight: 700;
      font-style: normal;
      font-size: 14px;
      text-align: left;
      display: block;
      width: 90px;
    }
    p {
      font-weight: 700;
      font-style: normal;
      font-size: 14px;
      text-align: left;
    }
  }
  .brand_address {
    display: flex;
    h3 {
      font-weight: 700;
      font-style: normal;
      font-size: 14px;
      text-align: left;
      display: block;
      width: 90px;
    }
    p {
      font-weight: 700;
      font-style: normal;
      font-size: 14px;
      text-align: left;
    }
  }
  .style {
    display: flex;
    h3 {
      font-weight: 700;
      font-style: normal;
      font-size: 14px;
      text-align: left;
      display: block;
      width: 90px;
    }
    p {
      font-weight: 700;
      font-style: normal;
      font-size: 14px;
      text-align: left;
    }
  }
}
.evaluation {
  width: 100%;
  height: 240px;
  margin-bottom: 10px;
  box-sizing: border-box;
  padding: 10px 12px 10px 12px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  .title {
    display: flex;
    justify-content: space-between;
    h3 {
      font-weight: 700;
      font-size: 16px;
    }
    .button {
      font-weight: 700;
      font-style: normal;
      font-size: 14px;
      color: #c1ab96;
      cursor: pointer;
    }
  }
}
.goods_details {
  width: 100%;
  margin-bottom: 10px;
  box-sizing: border-box;
  padding: 10px 12px 10px 12px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .title {
    font-weight: 700;
    font-size: 16px;
  }
  .content {
    margin-top: 5px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    img {
      width: 100%;
    }
  }
}
.bottom {
  position: fixed;
  bottom: 0;
  width: 100vw;
  height: 70px;
  box-sizing: border-box;
  padding: 10px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .shop,
  .service,
  .collection {
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      width: 20px;
      height: 20px;
      margin-bottom: 5px;
    }
    p {
      font-weight: 400;
      font-size: 14px;
    }
  }
  .bottom_btn {
    display: flex;
    justify-content: center;

    .add {
      width: 100px;
      height: 35px;
      border-radius: 17.5px 0 0 17.5px;
      p {
        color: #ffff;
        font-size: 12px;
      }
    }
    .buy {
      width: 100px;
      height: 35px;
      border-radius: 0 17.5px 17.5px 0;
      p {
        color: #ffff;
        font-size: 12px;
      }
    }
  }
}
</style>